<template>
  <div>
    <!-- 弹框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :before-close="close"
      width="80%"
      class="dialog"
    >
      <el-button type="primary" icon="el-icon-plus" @click="chatApiKeyAddButton"
        >新增</el-button
      >
      <el-table :data="apiKeyData" style="width: 100%; margin-top: 10px" border>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="apiKey" label="apikey"> </el-table-column>
        <el-table-column prop="apikeyDesc" label="模型描述"> </el-table-column>
        <el-table-column prop="status" label="使用状态">
          <template slot-scope="scope">
            <el-switch
              @change="statusChange(scope.row)"
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="2"
              active-text="使用中"
              inactive-text="未使用"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="upd(scope.row)"
              title="修改"
            />
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="del(scope.row.id)"
              title="删除"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 新增弹框 -->
    <el-dialog
      :title="dialogTitleAddOrUpd"
      :visible.sync="dialogVisibleAddOrUpd"
      :before-close="closeAddOrUpd"
      class="dialog"
    >
      <el-form :model="form" :rules="rules" ref="form" :inline="true">
        <el-form-item label="apiKey" prop="apiKey" :label-width="formLabelWidth">
          <el-input style="width: 300px" v-model="form.apiKey"></el-input>
        </el-form-item>
        <br />
        <el-form-item label="apiKey描述" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            v-model="form.apikeyDesc"
            autocomplete="off"
            :rows="4"
            :autosize="{ minRows: 2, maxRows: 4 }"
            style="width: 500px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeAddOrUpd()">取 消</el-button>
        <el-button type="primary" @click="addorUpd()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getChatApiKeyList, add, upd, del, updStatus } from "@/services/chatApiKey";
export default {
  name: "AiApiKeySetting",
  props: ["dialogTitle", "apiKeydialogVisible"],
  watch: {
    // 监听 prop 的变化，更新子组件内部的属性
    apiKeydialogVisible(newValue) {
      this.dialogVisible = newValue;
      if (newValue) {
        this.getChatApiKeyList();
      }
    },
  },
  data() {
    return {
      formLabelWidth: "150px",
      dialogVisible: false,
      dialogVisibleAddOrUpd: false,
      dialogTitleAddOrUpd: "新增apiKey",
      addOrUpdType: "ADD",
      apiKeyData: [],
      form: {
        apiKey: "",
        apikeyDesc: "",
      },
      rules: {
        apiKey: [
          { required: true, message: "请填写apiKey", trigger: "blur" },
          {
            min: 3,
            max: 100,
            message: "长度在 3 到 100个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },

  mounted() {},

  methods: {
    close() {
      this.dialogVisible = false;
      this.$emit("apiKey_dialog-visible-change", false);
    },
    getChatApiKeyList() {
      getChatApiKeyList()
        .then((res) => {
          this.apiKeyData = res.data;
        })
        .catch((error) => {});
    },
    chatApiKeyAddButton() {
      this.dialogVisibleAddOrUpd = true;
      this.dialogTitleAddOrUpd = "新增";
    },
    closeAddOrUpd() {
      this.dialogVisibleAddOrUpd = false;
    },
    upd(form) {
      this.dialogVisibleAddOrUpd = true;
      this.dialogTitleAddOrUpd = "修改";
      this.addOrUpdType = "UPD";
      this.form = JSON.parse(JSON.stringify(form));
    },
    addorUpd() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.addOrUpdType === "ADD") {
            add(this.form)
              .then((res) => {
                this.$message({
                  type: "success",
                  message: "新增成功",
                });
                this.dialogVisibleAddOrUpd = false;
                this.getChatApiKeyList();
                this.form = {};
              })
              .catch((err) => {});
          } else {
            upd(this.form)
              .then((res) => {
                this.$message({
                  type: "success",
                  message: "修改成功",
                });
                this.dialogVisibleAddOrUpd = false;
                this.getChatApiKeyList();
                this.form = {};
              })
              .catch((err) => {});
          }
        }
      });
    },
    del(id) {
      this.$confirm("是否要删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        del(id)
          .then((res) => {
            this.$message({
              type: "success",
              message: "删除成功",
            });
            this.getChatApiKeyList();
          })
          .catch((err) => {});
      });
    },
    statusChange(row) {
      updStatus(row.id)
        .then((res) => {
          this.$message({
            type: "success",
            message: "修改成功",
          });
          this.getChatApiKeyList();
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="scss" scoped></style>
